<%@ page pageEncoding="utf-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html:html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<html:base />
    <link href='<c:out value="${ctx}"/>/styles/style1.css' rel="stylesheet" type="text/css" />
    <link href='<c:out value="${ctx}"/>/styles/demo_table_jui.css' rel="stylesheet" type="text/css" />
    <link href='<c:out value="${ctx}"/>/styles/jquery-ui-1.7.2.custom.css' rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript" src='<c:out value="${ctx}"/>/js/jquery/jquery.js'></script>
	<script type="text/javascript" language="javascript" src='<c:out value="${ctx}"/>/js/jquery/jquery.dataTables.js'></script>
	<script type="text/javascript">
		/*
		 * on one checked, uncheck other
		 */
		function onlyOneClick(chkid, chked) {
			if (chked) {
				$("#tableBody input[name='id[]']").each(function() {
					if (chkid != $(this).attr("value")) {
						$(this).attr("checked", false);
					}
			    });
			}
		};

		/**
		 * call by query click to generate table
		 */
	    /*
		function buildTable(tableData) {
			var tableBody = $("#tableBody");
			tableBody.html("");
		    //add the table rows
			$.each(tableData, function(i){
		        tableBody.append('<tr></tr>');
		        var tr = $('tr:last', tableBody);
	            tr.append('<td><input name="id[]" type="checkbox" value="' + tableData[i].id + '" onClick="onlyOneClick(this.value, this.checked)" /></td>');
	            tr.append('<td>' + tableData[i].id + '</td>');
	            tr.append('<td>' + tableData[i].username + '</td>');
	            tr.append('<td>' + tableData[i].name_tw + '</td>');
	            tr.append('<td>' + tableData[i].name_en + '</td>');
	            tr.append('<td>' + tableData[i].enable_flag + '</td>');
			});
		}; */
		var oTable;        // 宣告為global變數
		function buildTable(tableData) {
			oTable.fnClearTable(0);    // 等同html("")
		    //add the table rows
			$.each(tableData, function(i){
				oTable.fnAddData([
				    '<input name="id[]" type="checkbox" value="' + tableData[i].id + '" onClick="onlyOneClick(this.value, this.checked)" />',
				    tableData[i].id,
				    tableData[i].username,
				    tableData[i].name_tw,
				    tableData[i].name_en,
				    tableData[i].enable_flag
				]);
			});
			oTable.fnDraw();           // 重新繪製
		};

		function querySubmit() {
			dataString = $("#mainForm").serialize();
			$.ajax({
				url: '<c:out value="${ctx}"/>/ajaxAccountQuery.do',
				type: 'POST',
				data: dataString,
				dataType: 'json',
				success: function(data, status){
					buildTable(data);
				},
				error: function(xhrInstance, status, xhrException) {
					alert("failure:" + status);
				}
			});
			return false;
		}

		/**
		 * Call by insert/update/delete button to submit
		 */
		function opSubmit(opValue) {
			var chkid = null;
			$("#tableBody input[name='id[]']").each(function() {
				if ($(this).attr("checked")) {
					chkid = $(this).attr("value");
					return;
				}
		    });
		    if (chkid == null && opValue != 'insert') {
			    alert("Must select a item to " + opValue);
			    return;
		    }
		    $("#op").attr("value", opValue);
		    $("#opForm input[name='id']").attr("value", chkid);
//		    alert($("#op").attr("value") + " " + $("#opForm input[name='id']").attr("value"));
		    $("#opForm").attr("action", '<c:out value="${ctx}"/>/' + opValue + "Account.do");
		    $("#opForm").submit();
		};

		/**
		 * Ready to DataTable Grid
		 */
		$(document).ready(function() {
			oTable = $('#table_grid').dataTable({
				"bJQueryUI": true,
				"sPaginationType": "full_numbers"
			});
			// set Permission
			$('#insert').replaceWith('<input type="button" name="insert" id="insert" value="新增" onclick="opSubmit(this.name)" <aa:item2 itemId="1"/>/>');
			$('#update').replaceWith('<input type="button" name="update" id="update" value="修改" onclick="opSubmit(this.name)" <aa:item2 itemId="2"/>/>');
			$('#delete').replaceWith('<input type="button" name="delete" id="delete" value="刪除" onclick="opSubmit(this.name)" <aa:item2 itemId="3"/>/>');
			$('#query').replaceWith('<input type="button" name="query" id="query" value="查詢" onclick="querySubmit()" <aa:item2 itemId="4"/>/>');
		} );
	</script>
    <title>Accounts</title>
</head>

<body>
<div id="dt_example">
<form id="mainForm" method="post" name="mainForm">
	<div id="Accounts" class="queryarea">
   	<table id="shopping_list" width="100%" border="0">
	    <tr>
	      <th  class="th" colspan="6"> 查詢區(請輸入條件)</th>
	    </tr>
	    <tr>
	      <td width="20%">登入帳號：</td>
	      <td width="15%"><html:text property="username" size="16" name="lazyForm"/></td>
	      <td width="20%">中文姓名：</td>
	      <td width="15%"><html:text property="name_tw" size="16" name="lazyForm"/></td>
	      <td width="20%">英文姓名：</td>
	      <td width="20%"><html:text property="name_en" size="16" name="lazyForm"/></td>
	    </tr>
	    <tr>
	      <td>Email帳號：</td>
	      <td><html:text property="email" size="16" name="lazyForm"/></td>
	      <td>啟動旗標：</td>
	      <td><p>
	        <label>
	          <html:checkbox property="enable_flag" value="Y" name="lazyForm"/>
	          是</label>
	        <label>
	          <html:checkbox property="disable_flag" value="N" name="lazyForm"/>
	          否</label>
	        <br />
	      </p></td>
	      <td>&nbsp;</td>
	      <td>&nbsp;</td>
	    </tr>
	    <tr>
	      <th colspan="6" class="td1">
	      	<input type="button" name="insert" id="insert" value="新增" onclick="opSubmit(this.name)"/>
	        <input type="button" name="update" id="update" value="修改" onclick="opSubmit(this.name)" />
	        <input type="button" name="delete" id="delete" value="刪除" onclick="opSubmit(this.name)" />
	        <input type="button" name="query" id="query" onclick="querySubmit()" value="查詢" />
	      </th>
	    </tr>
  	</table>
	</div>
</form>
<div id="container">
<div class="demo_jui">
<form id="opForm" name="opForm" method="post">
	<input type="hidden" name="op" id="op"/>
	<input type="hidden" name="id" id="id"/>
</form>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="table_grid">
	<thead>
		<tr>
		 	<th width="7%">&nbsp;</th>
			<th width="13%">ID</th>
			<th width="21%">登入帳號</th>
			<th width="19%">中文姓名</th>
			<th width="18%">英文姓名</th>
			<th width="22%">啟動旗標</th>
		</tr>
	</thead>
	<tbody id="tableBody">
	</tbody>
</table>
</div>
</div>
</div>

</body>
</html:html>
